<template>
    <button @click="loginOther" class="google-btn">
        <img src="@/assets/images/google.svg">
        <span v-text="name || 'Sign in with Google'"></span>
    </button>
</template>

<script>
export default {
    props: {
        name: { type: String, default: '' },
    },
    data () {
        return {
            visible: false,
        };
    },
    watch: {
        // isLogin: {
        //     handler: function (newval, oldval) {
        //         if (oldval != newval) {
        //             if (newval) {
        //                 // 登录了
        //                 this.loginCallBack(); //执行回调
        //                 this.$emit("loginSuccess"); //登录成功
        //                 //重置回调
        //                 this.close();
        //                 this.initData();
        //             } else {
        //                 // 未登录
        //                 this.checkForceLogin();
        //             }
        //         }
        //     },
        //     deep: true,
        //     immediate: true,
        // },
        // show: {
        //     handler: function (v, ov) {
        //         var mo = function (e) {
        //             e.preventDefault();
        //         };
        //         if (!process.client) {
        //         } else if (v) {
        //             //禁止滚动
        //             document.body.style.overflow = "hidden";
        //             document.body.style.width = "100vw";
        //             document.addEventListener("touchmove", mo, false); //禁止页面滑动
        //         } else {
        //             /***取消滑动限制***/
        //             document.body.style.overflow = ""; //出现滚动条
        //             document.body.style.width = "";
        //             document.removeEventListener("touchmove", mo, false);
        //         }
        //     },
        //     immediate: true,
        // },
    },
    methods: {

        //谷歌授权登录
        async loginOther (n) {
            let opener = window.open("about:blank", "_blank", "width=550,height=800");
            let res = await this.$http("getGoogleLogin");
            if (res.code == 0) {
                opener && (opener.location = res.data);
            } else {
                opener && opener.close();
            }
        },

    },
    created () {

    },
};
</script>

<style lang="scss" scoped>
.google-btn {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 42px;
    background: #ffffff;
    border-radius: 8px;
    span {
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        line-height: 16px;
    }
    img {
        width: 24px;
        height: 24px;
        margin-right: 12px;
    }
}
</style>
